<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <form id="myForm">
			<label>用户名:</label><input id="username" type = "text" name="username" placeholder="请设置用户名" required/>
			<span  id="msg"></span>
            <input type="submit" value="submit">
		</form>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
        <script>
//            $(function () {
//                $("#username").blur(function() {
//                    var par = /^[0-9a-z]{8,18}$/i;
//                    //var value1 = this.value;
//                    var value1 = $(this).val();
//                    if(par.test(value1)) {
//                        $("#msg").text("用户名合法");
//                    }else {
//                        $("#msg").text("用户名不合法");
//                    }
//                })
//            })
            //插件
            $().ready(function(){
                $("#myForm").validate(
                    {
                        rules: {
                            username: {
                                required: true,
                                minlength:8,
                                maxlength: 18
                            }
                        },
                        messages: {
                            username: {
                                required: "不能为空",
                                minlength: "长度不小于8位",
                                maxlength: "长度不大于18位"
                            }
                        }

                }
                )
            })
        </script>
</body>
</html>